<template>
  <div class="Storein">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>进仓单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框 -->
    <el-card class="search">
      <el-input
        class="input"
        v-model="input"
        placeholder="请输入关键字"
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 6px"
        icon="el-icon-search"
        @click="searching"
      ></el-button>
    </el-card>
    <!-- 主界面 -->
    <el-card class="main">
      <el-table
        :data="
          StoreIn.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        style="width: 100%"
      >
        <el-table-column label="进仓单号">
          <template slot-scope="scope">
            <span>{{ scope.row.stid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购单号">
          <template slot-scope="scope">
            <span>{{ scope.row.pcid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="公司">
          <template slot-scope="scope">
            <span>{{ scope.row.buyer }}</span>
          </template>
        </el-table-column>
        <el-table-column label="货主">
          <template slot-scope="scope">
            <span>{{ scope.row.seller }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作员">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>
        <el-table-column label="进仓时间" width="200px">
          <template slot-scope="scope">
            <span>{{ scope.row.storetime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="进仓核对确认">
          <template slot-scope="scope">
            <span>
              {{ scope.row.isstore ? "已进仓" : "未进仓" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240px" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.isstore"
              @click="confirm(scope.row.stid)"
              type="success"
            >
              确认
            </el-button>
            <el-button @click="getStoreIn(scope.row)" type="primary">
              详情
            </el-button>
            <el-button @click="deleteById(scope.row.stid)" type="danger">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
      ></el-pagination>
    </el-card>
    <!-- 详细货物列表 -->
    <el-dialog
      title="进仓单详情"
      :visible.sync="dialogTableVisible"
      width="70%"
    >
      <h1 class="title">{{ detailStoreIn.buyer }}进仓单</h1>
      <el-descriptions
        class="detail-header"
        direction="vertical"
        :column="3"
        border
      >
        <el-descriptions-item label="货主名称">
          {{ detailStoreIn.buyer }}
        </el-descriptions-item>
        <el-descriptions-item label="进仓单号">
          {{ detailStoreIn.stid }}
        </el-descriptions-item>
        <el-descriptions-item label="采购单号">
          {{ detailStoreIn.pcid }}
        </el-descriptions-item>
        <el-descriptions-item label="进仓日期">
          {{ detailStoreIn.storetime }}
        </el-descriptions-item>
        <el-descriptions-item label="开单员">
          {{ detailStoreIn.operator }}
        </el-descriptions-item>
        <el-descriptions-item label="核对确认">
          {{ detailStoreIn.isstore ? "已进仓" : "未进仓" }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="detailStoreIn.stlist">
        <el-table-column label="品牌">
          <template slot-scope="scope">
            <span>{{ scope.row.brand }}</span>
          </template>
        </el-table-column>
        <el-table-column label="纸种">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="级别">
          <template slot-scope="scope">
            <span>{{ scope.row.rank }}</span>
          </template>
        </el-table-column>
        <el-table-column label="克重">
          <template slot-scope="scope">
            <span>{{ scope.row.perweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格">
          <template slot-scope="scope">
            <span>{{ scope.row.guide }}</span>
          </template>
        </el-table-column>
        <el-table-column label="进仓数量">
          <template slot-scope="scope">
            <span>{{ scope.row.checkweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template slot-scope="scope">
            <span>{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="件数">
          <template slot-scope="scope">
            <span>{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库位">
          <template slot-scope="scope">
            <span>{{ scope.row.kuwei }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.more }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAll,
  deleteByStid,
  updateIsstoreByStid,
} from "@/network/StoreInManage.js";

export default {
  data() {
    return {
      // 搜索栏
      input: "",
      dialogTableVisible: false,
      // 用于存放当前点击的 StoreIn 详细进仓单
      detailStoreIn: {
        stid: "",
        pcid: "",
        buyer: "",
        seller: "",
        stlist: [],
        isstore: false,
        operator: "",
        storetime: "",
      },
      // 进仓单(n)
      StoreIn: [],
      currentPage: 1,
      pagesize: 5,
    };
  },
  created() {
    // 查找所有
    getAll()
      .then((res) => {
        console.log(res.data.obj);
        let ret = res.data.obj;
        for (let i = 0; i < ret.length; i++)
          ret[i].stlist = JSON.parse(ret[i].stlist);
        this.StoreIn = ret;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  methods: {
    searching() {
      // 关键字查找: 摆设
    },
    // 进仓核对确认
    confirm(stid) {
      // 根据stid查询数据库, 修改对应的isstore
      this.$confirm("确认进仓？")
        .then((_) => {
          updateIsstoreByStid({ stid: stid })
            .then((res) => {
              if (res.data.code == "200") {
                this.$message({
                  message: res.data.status,
                  type: "success",
                });
                getAll()
                  .then((res) => {
                    console.log(res.data.obj);
                    let ret = res.data.obj;
                    for (let i = 0; i < ret.length; i++)
                      ret[i].stlist = JSON.parse(ret[i].stlist);
                    this.StoreIn = ret;
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
              } else {
                this.$message(res.data.status);
              }
            })
            .catch(function (error) {
              console.log(error);
            });
          // 页面刷新
          // window.location.reload()
        })
        .catch((_) => {});
    },
    deleteById(stid) {
      this.$confirm("确认删除？")
        .then((_) => {
          // 根据stid删除对应进仓单
          deleteByStid({ stid: stid })
            .then((res) => {
              if (res.data.code == "200") {
                this.$message({
                  message: res.data.status,
                  type: "success",
                });
                getAll()
                  .then((res) => {
                    console.log(res.data.obj);
                    let ret = res.data.obj;
                    for (let i = 0; i < ret.length; i++)
                      ret[i].stlist = JSON.parse(ret[i].stlist);
                    this.StoreIn = ret;
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
              } else {
                this.$message(res.data.status);
              }
            })
            .catch(function (error) {
              console.log(error);
            });
          // 页面刷新
        })
        .catch((_) => {});
    },
    getStoreIn(storeIn) {
      this.dialogTableVisible = true;
      this.detailStoreIn = storeIn;
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.title {
  text-align: center;
  margin-bottom: 30px;
}
.detail-header {
  margin-bottom: 10px;
}
.input {
  width: 30%;
}
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.btn {
  margin-left: 880px;
}
.el-table {
  margin-top: 15px;
}
.el-pagination {
  text-align: center;
}
.main,
.search {
  margin-inline: 15px;
  min-height: 100%;
  height: 100%;
}
.head {
  margin-top: 5px;
}
.input {
  width: 300px;
}
.main {
  margin-top: 5px;
}
</style>
